import React, {useState, useEffect, useRef} from 'react'
import Tabs from '@components/tabs'
import { Modal, Button, message } from 'antd'
import dayjs from 'dayjs'
import RollForm from './rollForm'
import http from '@utils/http'

const CreateTransactionModal = (props) => {
  const [currentTab, setCurrentTab] = useState('1')
  const rollInFormRef = useRef()
  const rollOutFormRef = useRef()

  useEffect(() => {
  }, [])

  const onClose = () => {
    Modal.destroyAll()
  }

  const handleConfirm = async () => {
    let form = null

    if (currentTab === '1') {
      form = rollInFormRef.current.form
    } else {
      form = rollOutFormRef.current.form
    }

    const { amount, date, notes, rollIn, rollOut } = await form.validateFields()

    if (!form) return

    const params = {
      amount: Number(amount),
      date: dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
      notes,
      rollIn,
      rollOut,
      action: currentTab === '1' ? 'rollIn' : 'rollOut'
    }
    console.log('params', params)
    http.post('fetchTransferBalance', params).then(res => {
      if (res.code === 200) {
        message.success('操作成功')
        props.onUpdate && props.onUpdate()
        onClose()
      } else {
        message.error(res.message)
      }
    })
  }

  const tabItems = [
    {
      key: '1',
      label: (
        <div className="roll-item roll-in">
          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.4699 22.5C6.6799 22.44 1.9999 17.73 2.0599 11.94C2.0899 6.21003 6.7399 1.56003 12.4699 1.53003C12.8899 1.53003 13.2799 1.86003 13.2799 2.28003C13.2799 2.70003 12.9499 3.09003 12.5299 3.09003H12.4699C7.5499 3.09003 3.5599 7.08003 3.5599 12C3.5599 16.92 7.5499 20.91 12.4699 20.91C17.3899 20.91 21.3799 16.92 21.3799 12C21.3799 11.58 21.7699 11.22 22.1899 11.25C22.6099 11.25 22.9399 11.61 22.9399 12C22.9399 17.79 18.2599 22.5 12.4699 22.5Z" />
            <path d="M15.59 11.2499H9.28998C8.86998 11.2499 8.47998 10.9199 8.47998 10.4999C8.47998 10.0799 8.80998 9.68994 9.22998 9.68994H15.59C16.01 9.68994 16.37 10.0799 16.34 10.4999C16.37 10.9199 16.01 11.2499 15.59 11.2499ZM15.59 14.3099H9.28998C8.86998 14.3099 8.50998 13.9199 8.53998 13.4999C8.53998 13.0799 8.89998 12.7499 9.28998 12.7499H15.59C16.01 12.7499 16.37 13.1399 16.34 13.5599C16.37 13.9499 16.01 14.2799 15.59 14.3099Z" />
            <path d="M12.4699 17.4599C12.0499 17.4599 11.6899 17.0999 11.6899 16.6799V10.3799C11.6899 9.95992 12.0799 9.59992 12.4999 9.62992C12.9199 9.62992 13.2499 9.98992 13.2499 10.3799V16.6799C13.2499 17.0999 12.8899 17.4599 12.4699 17.4599Z" />
            <path d="M12.4699 10.7399C12.2599 10.7399 12.0499 10.6499 11.8999 10.4999L9.28991 7.91993C8.95991 7.64993 8.92991 7.13993 9.22991 6.80993C9.49991 6.47993 10.0099 6.44993 10.3399 6.74993L10.3999 6.80993L12.9799 9.38993C13.2799 9.68993 13.2799 10.1999 12.9799 10.4999C12.8599 10.6499 12.6499 10.7399 12.4699 10.7399Z" />
            <path d="M12.47 10.7401C12.26 10.7401 12.05 10.6501 11.9 10.5001C11.6 10.2001 11.6 9.69007 11.9 9.39007L14.48 6.81007C14.81 6.54007 15.29 6.57007 15.59 6.87007C15.86 7.17007 15.86 7.59007 15.59 7.89007L13.01 10.5001C12.86 10.6501 12.65 10.7401 12.47 10.7401ZM17.33 5.46007L19.91 2.85007L19.94 2.82007C20.24 2.49007 20.21 2.01007 19.91 1.71007C19.58 1.41007 19.1 1.44007 18.8 1.74007L16.22 4.35007C16.07 4.50007 15.98 4.71007 15.98 4.92007C15.98 5.34007 16.34 5.70007 16.76 5.70007C17 5.70007 17.21 5.61007 17.33 5.46007Z" />
            <path d="M19.4 8.27996C19.61 8.27996 19.82 8.18996 19.97 8.03996C20.27 7.73996 20.27 7.22996 19.97 6.92996L17.39 4.34996C17.09 4.07996 16.67 4.07996 16.37 4.34996C16.04 4.61996 16.01 5.12996 16.31 5.45996L18.89 8.06996C18.98 8.18996 19.19 8.27996 19.4 8.27996Z" />
            <path d="M22.1899 5.69989C22.6099 5.69989 22.9399 5.33989 22.9399 4.94989C22.9399 4.52989 22.6099 4.13989 22.1899 4.13989H16.8799C16.4599 4.13989 16.0999 4.52989 16.1299 4.94989C16.1299 5.36989 16.5199 5.72989 16.9399 5.69989H22.1899Z" />
          </svg>
          <span>转入</span>
        </div>
      ),
      node: <RollForm type="in" ref={rollInFormRef} />
    },
    {
      key: '2',
      label: (
        <div className="roll-item roll-out">
          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.4701 22.56C6.65008 22.5 1.94008 17.76 2.00008 11.94C2.06008 6.17997 6.71008 1.52997 12.4701 1.46997C12.8901 1.46997 13.2801 1.79997 13.2801 2.21997C13.2801 2.63997 12.9501 3.02997 12.5301 3.02997H12.4701C7.52008 3.05997 3.50008 7.04997 3.50008 12C3.50008 16.95 7.52008 20.97 12.4701 20.97C17.4201 20.97 21.4401 16.95 21.4401 12C21.4401 11.58 21.8301 11.22 22.2501 11.25C22.6701 11.25 23.0001 11.61 23.0001 12C23.0001 17.82 18.2901 22.56 12.4701 22.56Z" />
          <path d="M15.62 11.2499H9.28998C8.86998 11.2499 8.47998 10.9199 8.47998 10.4999C8.47998 10.0799 8.80998 9.68994 9.22998 9.68994H15.62C16.04 9.68994 16.4 10.0799 16.37 10.4999C16.37 10.9199 16.04 11.2499 15.62 11.2499ZM15.62 14.3099H9.28998C8.86998 14.3099 8.50998 13.9199 8.53998 13.4999C8.53998 13.0799 8.89998 12.7499 9.28998 12.7499H15.62C16.04 12.7499 16.4 13.1399 16.37 13.5599C16.37 13.9499 16.04 14.3099 15.62 14.3099Z" />
          <path d="M12.4699 17.4899C12.0499 17.4899 11.6899 17.1299 11.6899 16.7099V10.3499C11.6899 9.92989 12.0799 9.56989 12.4999 9.59989C12.9199 9.59989 13.2499 9.95989 13.2499 10.3499V16.6799C13.2499 17.1299 12.8899 17.4899 12.4699 17.4899Z" />
          <path d="M12.4699 10.7399C12.2599 10.7399 12.0499 10.6499 11.8999 10.4999L9.28991 7.88991C8.95991 7.58991 8.92991 7.10991 9.22991 6.77991C9.52991 6.44991 10.0099 6.41991 10.3399 6.71991L10.3999 6.77991L13.0099 9.38991C13.3099 9.68991 13.3099 10.1999 13.0099 10.4999C12.8599 10.6499 12.6499 10.7399 12.4699 10.7399Z" />
          <path d="M12.47 10.7399C12.26 10.7399 12.05 10.6499 11.9 10.4999C11.6 10.1999 11.6 9.68988 11.9 9.38988L14.51 6.77988C14.84 6.47988 15.35 6.53988 15.62 6.83988C15.89 7.13988 15.89 7.58988 15.62 7.88988L13.01 10.4999C12.86 10.6499 12.65 10.7399 12.47 10.7399ZM22.1901 5.66988C22.6101 5.66988 22.97 5.30988 22.97 4.88988C22.97 4.67988 22.88 4.46988 22.73 4.31988L20.12 1.70988C19.82 1.37988 19.34 1.37988 19.01 1.67988C18.68 1.97988 18.68 2.45988 18.98 2.78988L19.01 2.81988L21.62 5.42988C21.8 5.57988 21.9801 5.66988 22.1901 5.66988Z" />
          <path d="M19.61 8.27993C19.82 8.27993 20.03 8.18993 20.18 8.03993L22.79 5.42993C23.09 5.09993 23.03 4.58993 22.73 4.31993C22.43 4.04993 21.98 4.04993 21.68 4.31993L19.07 6.92993C18.77 7.22993 18.77 7.73993 19.07 8.03993C19.19 8.18993 19.4 8.27993 19.61 8.27993Z" />
          <path d="M22.0701 5.67011C22.4901 5.67011 22.8801 5.34011 22.8801 4.92011C22.8801 4.50011 22.5501 4.11011 22.1301 4.11011H16.7901C16.3701 4.11011 16.0101 4.50011 16.0401 4.92011C16.0401 5.34011 16.4001 5.67011 16.7901 5.67011H22.0701Z" />
          </svg>
          <span>转出</span>
        </div>
      ),
      node: <RollForm type="out" ref={rollOutFormRef} />
    }
  ]

  return (
    <div className="create-transaction-modal my-modal">
      <div className="modal-header">
        <div className="modal-title">调整余额</div>
        <i className="modal-close-btn" onClick={() => onClose()}></i>
      </div>
      <div className="modal-main">
        <Tabs items={tabItems} onChange={setCurrentTab} />
      </div>
      <div className="modal-footer">
        <Button onClick={() => onClose()}>取消</Button>
        <Button type="primary" onClick={() => handleConfirm()}>确定</Button>
      </div>
    </div>
  )
}

export default CreateTransactionModal;